<template>

  <el-drawer
      v-model="table"
      title="路线推荐"
      direction="rtl"
      size="50%"
      :z-index="99"
  >
    <div style="width: 400px;height: 400px;">
      <amap @send="setRoad"></amap>
    </div>

  </el-drawer>

  <el-container>
    <el-header class="auditor_header">
      路线申报
    </el-header>
    <el-main>
      <el-form  class="road"  label-width="200px" >
        <el-form-item label="运输路线">
          <el-col :span="20">
          <el-input v-model="routeMessage" type="textarea" :disabled="isSuggest===1"
                    placeholder="请用以下格式输入运输路线：xx收费站---xx高速---xx收费站"/>
          </el-col>
        </el-form-item>
        <el-row>
          <el-col :span="3" :offset="5">
            <el-button type="primary" @click="table=true" >选择路线</el-button>
          </el-col>

          <el-col :span="3"  style="font-size: 15px;line-height: 40px;">
            是否使用推荐路线
          </el-col>
          <el-col :span="3">
            <el-radio-group v-model="isSuggest" @change="changeSuggest">
              <el-radio :label="1" size="large">是</el-radio>
              <el-radio :label="0" size="large">否</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>


        <el-form-item label="运输时间" class="time">
          <el-col :span="3">
            <declareSlot @sentTime="getTime"></declareSlot>
          </el-col>
        </el-form-item>
        <el-form-item label="大件类型">
          <el-select
              v-model="region"
              placeholder="请选择大件类型"
          >
            <el-option label="Ⅰ" :value="1" />
            <el-option label="Ⅱ" :value="2" />
            <el-option label="Ⅲ" :value="3" />
            <el-option label="Ⅳ" :value="4" />
          </el-select>
        </el-form-item>
        <el-col :span="10">
        <el-form-item label="途径州市">
          <el-input v-model="passCities"  :disabled="isSuggest===1"/>
        </el-form-item>
        </el-col>
        <el-col :span="10">
        <el-form-item label="货物重量（吨）">
          <el-input v-model="goodWeight" />
        </el-form-item>
        </el-col>
        <el-form-item label="请选择您的车辆">
          <el-select v-model="car" placeholder="选择车辆"  allow-create  filterable>
            <el-option    v-for="item in options"
                          :key="item"
                          :label="item"
                          :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" :plain="true" @click="onSubmit" size="large">提交</el-button>
        </el-form-item>
      </el-form>
    </el-main>

  </el-container>
</template>
<script>
import axios from "axios";
import DeclareSlot from "@/router/driver/declareSlot";
import {ElMessage} from "element-plus";
import amap from "@/components/map";
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: {DeclareSlot,amap},
  data() {
    return {
      beginLngLat: [],
      endLngLat:[],
      table:false,
      beginRoadId:'',
      endRoadId:'',
      applyDate: '',
      beginDate: '',
      endDate: '',
      roadBegin: 1,
      roadEnd: 2,
      isSuggest: 0,
      routeMessage: '',
      region: '',
      passCities: '',
      goodWeight: '',
      car: '',
      date: '',
      start: '',
      finish: '',
      dialogTableVisible:false,
      gridData: [
        {
          id: 1,
          route: '长沙收费站---湘潭收费站---张家界收费站'
        },
        {
          id: 2,
          route: '长沙收费站---湘潭收费站---张家界收费站'
        },
        {
          id: 3,
          route: '长沙收费站---湘潭收费站---张家界收费站'
        },
      ],
      options: [

      ]
    }
  },
  mounted() {//点击路线申报自动向后台发送申请来获取车辆信息
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)

    axios({
      method: 'post',
      url: '/api/road/getTrucks',
      params: {
      idCard:user.idCard
      },
    })
    .then((res)=>{
     for(var i=0;i<res.data.data.length;i++){
       this.options.push(res.data.data[i].truckLicense)

     }
    });
  },
  methods:{
    changeSuggest(){
      this.routeMessage=''
      this.passCities=''
    },
    setRoad(road,city,avalue,bvalue){
      console.log(road,city)
      this.routeMessage=road
      this.passCities=city.join()
      this.beginLngLat=avalue
      this.endLngLat=bvalue
      this.isSuggest=1
    },
    getTime:function (data){
      let d1=new Date(data[0])
      let d2=new Date(data[1])
      let yy1 =d1.getFullYear();
      let mm1 =d1.getMonth()+1;
      if(mm1<10){
        mm1='0'+mm1
      }
      let dd1 =d1.getDate();
      if(dd1<10){
        dd1='0'+dd1
      }
      let hour1=d1.getHours();
      let minute1=d1.getMinutes();
      let second1=d1.getSeconds();
      if(hour1<10){
        hour1='0'+hour1
      }
      if(second1<10){
        second1='0'+second1
      }
      if(minute1<10){
        minute1='0'+minute1
      }
      let yy2 =d2.getFullYear();
      let mm2 =d2.getMonth()+1;
      if(mm2<10) {
        mm2 = '0'+mm2
      }
      let dd2 =d2.getDate();
      if(dd2<10){
        dd2='0'+dd2
      }
      let hour2=d2.getHours();
      let minute2=d2.getMinutes();
      let second2=d2.getSeconds();
      if(hour2<10){
        hour2='0'+hour2
      }
      if(second2<10){
        second2='0'+second2
      }
      if(minute2<10){
        minute2='0'+minute2
      }
      this.beginDate=yy1+'-'+mm1+'-'+dd1+' '+hour1+":"+minute1+":"+second1;
      this.endDate=yy2+'-'+mm2+'-'+dd2+' '+hour2+":"+minute2+":"+second2;
    },
    routeRecommend:function (){//根据起始点获取推荐路线
      // let userjson=sessionStorage.getItem('user')
      //    let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/road/suggestRoads',

        params: {
          begin:this.start,
          end:this.finish,
        },
      })
      .then((res)=>{
            this.gridData=res.data.data
        for(var i=0;i<res.data.data.length;i++){
              this.gridData[i].id=i+1
        }
           });
    },
  onSubmit:function (){
     let userjson=sessionStorage.getItem('user')
     let user=JSON.parse(userjson)
    let yy =new Date().getFullYear();
    let mm =new Date().getMonth()+1;
    if(mm<10){
      mm='0'+mm
    }
    let dd =new Date().getDate();
    let hour=new Date().getHours();
    let minute=new Date().getMinutes();
    let second=new Date().getSeconds();
    if(dd<10){
      dd='0'+dd
    }
    if(hour<10){
      hour='0'+hour
    }
    if(minute<10){
      minute='0'+minute
    }
    if(second<10){
      second='0'+second
    }
    let reg = /^[0-9]+([.]{1}[0-9]+){0,1}$/
    this.applyDate=yy+'-'+mm+'-'+dd+' '+hour+":"+minute+":"+second;
      if(this.routeMessage==''||this.region==''||this.passCities==''||this.goodWeight==''||this.car==''||this.beginDate==''||this.endDate==''){
        // alert("请完善申请信息")
        ElMessage.warning('请完善申请信息')
      }
      else if(!reg.test(this.goodWeight)){
        ElMessage.warning('请输入正确的货物重量')
      }
      else {

        axios({

          method: 'post',
          url: '/api/road/submitRoadApply',
          data: {
            username:user.username,
            applyDate:this.applyDate,
            whetherUseAdvice: this.isSuggest,
            suggestRoad: this.routeMessage,
            cargoType: this.region,
            passCities: this.passCities,
            roadBegin:this.beginRoadId,
            roadEnd:this.endRoadId,
            cargoWeight: this.goodWeight,
            truckLicense: this.car,
            beginDate:this.beginDate,
            endDate:this.endDate,
            beginLngLat:this.beginLngLat,
            endLngLat:this.endLngLat
          },

        })
        .then((res) => {
          if (res.data.code == 0) {
            // alert("提交失败")
            ElMessage.error('提交失败')
          } else {
            // alert("提交成功")
            ElMessage.success('提交成功')
            this.applyDate=''
            this.isSuggest=0
            this.routeMessage=''
            this.region=''
            this.passCities=''
            this.beginRoadId=1
            this.endRoadId=2
            this.goodWeight=''
            this.car=''
            this.beginDate=''
            this.endDate=''
            this.beginLngLat=[]
            this.endLngLat=[]
          }
        });
      }
  }
  }
}
</script>


<style scoped>
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.road {
  font-size: 30px;
  font-family: Arial, sans-serif;
}

.el-main{
  padding-top: 30px;
}
.el-pagination{
  justify-content: center !important;
}
</style>
